<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>管理员预约管理界面</span>
      </div>
    </template>

    <!-- 查询顾客名称 -->
    <!-- 查询 -->
    <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
      <el-form-item label="预约患者">
        <el-input
          v-model="frmQuery.user_name"
          placeholder="请输入患者姓名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="btnQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="user_name" label="患者姓名" width="150" />
      <el-table-column prop="ws_date" label="预约日期" width="100">
</el-table-column>
     <el-table-column prop="time" label="预约时间" width="150"></el-table-column>
    <el-table-column prop="pc_name" label="咨询师" width="150"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="否"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="Are you sure to delete this?"
            @confirm="deleteClick(scope.row.ws_id)"
          >
            <template #reference>
              <el-button link type="warning" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
  
<script>
import { ElMessage, ElPopconfirm } from "element-plus";
export default {
  data() {
    return {
      frmQuery:{
        user_name:""
      },
      formLabelWidth: "140px",
   
      tableData: [],
    };
  },
  mounted() {
    this.LoadData();
    
  },
  methods: {
    LoadData() {
      this.$http
        .get(
          "http://localhost:8080/appointment/admincheckyuyue?user_name="+this.frmQuery.user_name
        )
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

  btnQuery(){
    this.$http
        .get(
          "http://localhost:8080/appointment/admincheckyuyue?user_name="+this.frmQuery.user_name
        )
        .then((res) => {
          this.tableData = res.data;
          console.log(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
  }
  },
};
</script>
  
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>
  